<template>
	<!-- 轮播图 -->
	<view>
		<view class="swipers">
			<swiper class="swiper" :indicator-dots=true>
				<swiper-item v-for="item in banner">
					<image :src="item.pic" mode=""></image>
				</swiper-item>

			</swiper>
		</view>
		<view class="cart">
			<view class="right">
				<image src="../../static/icons/search.png" mode="" class="search"></image>
				<image src="../../static/icons/cart.png" mode="" @tap="goCart"></image>
			</view>
			
		</view>
		<!-- gird 分类-->
		<view class="gird">
			<view class="gird-item" v-for="item in categoryList" :key="item.id">
				<view class="gird-items" @tap=GOcategory(item.id)>
					<image :src="item.icon" mode=""></image>
					<view class="gird-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 限时活动 -->
		<view class="active">
			<view class="icon">
				<image src="../../static/icons/notify.png" mode=""></image>
			</view>
			<view class="active-title">
				限时活动：
			</view>

			<view class="active-swiper">
				<swiper autoplay="true" vertical="true" circular="true" interval="1500" duration="500">
					<swiper-item class="item" v-for="item in actList" :key="item.id" @tap="GogoodsInfo(item.id)">
						<view class="goods-desc">
							{{item.name}}
						</view>
						<view class="goods-price">
							<view class="old-price">
								{{item.price}}元
							</view>
							<view class="new-price">
								现价：{{item.promotionPrice}}元
							</view>
						</view>
					</swiper-item>

				</swiper>

			</view>
		</view>
		<!-- 热门推荐 -->
		<view class="hot">
			<view class="hot-title">
				热门推荐
			</view>
			<view class="hot-swiper">
				<swiper :autoplay="true" :interval="3000" :duration="1000" display-multiple-items="3" circular="true"
				 easing-function="easeOutCubic">
					<swiper-item v-for="item in hotList" :key="item.id" @tap="GogoodsInfo(item.id)">
						<view class="hot-item">
							<view class="hot-img">
								<image :src="item.pic" mode=""></image>
							</view>
							<view class="hot-name">
								{{item.name}}
							</view>
						</view>
					</swiper-item>

				</swiper>
			</view>
		</view>
		<!-- 新品推荐 -->
		<view class="new">
			<view class="new-title">
				新品推荐
			</view>
			<view class="new-product">
				<scroll-view scroll-x="true" show-scrollbar="true">
					<view class="product-box" v-for="item in newList" :key="item.id" @tap="GogoodsInfo(item.id)">
						<view class="product-img">
							<image :src="item.pic" mode=""></image>
						</view>
						<view class="product-desc">
							<view class="product-name">
								{{item.name}}
							</view>
							<view class="product-price">
								价格：￥{{item.price}}元
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="like-title">
				猜你喜欢
			</view>
			<view class="like-content">
				<view class="like-item" v-for="item in likeList" :key='item.id' @tap="GogoodsInfo(item.id)">
					<view class="like-img">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="like-desc">
						<view class="like-name">
							{{item.brandName}}
						</view>
						<view class="like-price">
							<view class="like-l">
								￥{{item.price}}元
							</view>
							<view class="like-r">
								乐居
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>


<script>
	import {
		banner,
		categorys,
		activityList,
		hotList,
		newList,
		like
	} from "../../utils/home/index.js"
	export default {
		data() {
			return {
				banner: [],
				categoryList: [],
				actList: [],
				hotList: [],
				newList: [],
				likeList:[]
			}
		},

		methods: {
			GOcategory(id){
				
				uni.navigateTo({
					url:"/pages/kind/categorys/categorys?id="+id
				})
			},
			goCart(){
				uni.navigateTo({
					url:'/pages/cart/cart'
				})
			},
			GogoodsInfo(id){
				uni.navigateTo({
					url:'/pages/goodsInfo/goodsInfo?id='+id
				})
			}
		},
		onLoad() {
			banner().then(res => {
				// console.log(res.data.items)
				this.banner = res.data.items
			})

			categorys("1308336521604599809").then(res => {
				// console.log(res.data.category.children)
				this.categoryList = res.data.category.children
			})
			activityList().then(res => {
				// console.log(res)
				this.actList = res.data.items
			})
			hotList().then(res => {
				// console.log(res)
				this.hotList = res.data.items
			})
			newList().then(res => {
				// console.log(res)
				this.newList = res.data.productList
			})
			like().then(res=>{
				// console.log(res)
				this.likeList=res.data.items
			})
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 428rpx;

		image {
			width: 100%;
			height: 428rpx;
			border-radius: 40rpx;


		}
	}

	.gird {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 60rpx auto;

		.gird-item {
			.gird-items {
				width: 120rpx;
				text-align: center;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;

				}
			}
		}
	}

	.active {
		display: flex;
		width: 90%;
		margin: 40rpx auto;
		background-color: #fff;
		height: 96rpx;
		line-height: 96rpx;
		align-items: center;

		.icon {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.active-title {
			font-weight: 600;
			color: orange;
		}

		.active-swiper {
			flex: 1;
			height: 96rpx;

			swiper {
				height: 96rpx;
			}

			.item {
				display: flex;
				height: 100%;
				align-items: center;

				.goods-desc {

					width: 250rpx;
					display: inline-block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}

				.goods-price {

					width: 180rpx;
					font-size: 24rpx;
					height: 100%;
					text-align: left;


					.old-price,
					.new-price {
						height: 50%;
						line-height: 48rpx;
						font-weight: 600;
					}

					.old-price {
						text-decoration: line-through;
						color: #333333;

					}

					.new-price {
						color: red
					}
				}
			}

		}

	}

	.hot {
		width: 90%;
		margin: 0 auto;

		.hot-title {
			padding: 30rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			color: #3e3e3e;
		}

		.hot-swiper {
			display: flex;
			justify-content: space-between;
			width: 100%;

			swiper {
				width: 100%;
			}

			.hot-item {
				width: 230rpx;
				height: 100%;

				.hot-img {
					width: 208rpx;
					height: 196rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.hot-name {
					font-size: 26rpx;
					line-height: 38rpx;
					text-align: center;
					margin-top: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;


				}
			}
		}
	}

	.new {
		width: 90%;
		margin: 0 auto;

		.new-title {
			padding: 30rpx 0;
			font-size: 32rpx;
			font-weight: 600;
			color: #3e3e3e;
		}

		.new-product {
			width: 100%;
			height: 100%;
			overflow: auto;

			white-space: nowrap;

			.product-box {
				width: 590rpx;
				display: inline-block;
				margin-right: 20rpx;
				position: relative;
				background-color: #fff;
				border-radius: 10rpx;
				height: 260rpx;

				.product-img {
					position: absolute;
					left: 44rpx;
					top: 0;
					bottom: 0;
					width: 194rpx;
					height: 168rpx;
					border-radius: 8rpx;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.product-desc {
					box-sizing: border-box;
					padding-left: 270rpx;
					padding-top: 50rpx;
					padding-bottom: 50rpx;
					height: 260rpx;
					background: #fff;
					box-shadow: 0 16px 48rpx 0 rgba(122, 98, 75, .12);
					border-radius: 20rpx;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex;
					-webkit-flex-wrap: wrap;
					flex-wrap: wrap;
					-webkit-box-pack: justify;
					-webkit-justify-content: space-between;
					justify-content: space-between;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-webkit-flex-direction: column;
					flex-direction: column;
					text-align: left;

					.product-name {
						font-size: 20rpx;
						height: 72rpx;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						white-space: normal;

					}

					.product-price {
						color: #3e3e3e;
						letter-spacing: 0.5px;
						width: 100%;
						font-size: 20rpx;
						font-weight: 600;

					}
				}
			}

		}
	}
	.like{
		width: 90%;
		margin: 0 auto;
		.like-title{
			padding: 30rpx 0;
			    font-family: PingFangSC-Semibold;
			    font-size: 32rpx;
			    color: #3e3e3e;
			    letter-spacing: 2rpx;
			    font-weight: 600;
		}
		.like-content{
			    width: 100%;
			    overflow: hidden;
			    display: -webkit-box;
			    display: -webkit-flex;
			    display: flex;
			    -webkit-box-align: center;
			    -webkit-align-items: center;
			    align-items: center;
			    -webkit-box-pack: justify;
			    -webkit-justify-content: space-between;
			    justify-content: space-between;
			    -webkit-flex-wrap: wrap;
			    flex-wrap: wrap;
				.like-item{
					width: 324rpx;
					    margin: 20rpx 0;
					    background-color: #fff;
					    border-radius: 8rpx;
						height: 416rpx;
						.like-img{
							width: 100%;
							 height:238rpx;
							 image{
								 width: 100%;
								 height: 100%;
							 }
							
						}
						.like-desc{
							padding: 36rpx;
							font-size: 26rpx;
							.like-price{
								margin-top: 20rpx;
								display: flex;
								justify-content: space-between;
							}
						}
				}
		}
	}
	.cart{
		position: fixed;
		    top: 0;
		    left: 0;
		    width: calc(100% - 30px);
		    z-index: 9999;
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    padding: 30rpx;
			.right{
				display: flex;
				justify-content: flex-end;
				flex: 1;
				image{
					width: 42rpx;
					 height: 42rpx;
					 display: block;
				}
				.search{
					margin-right: 30rpx;
				}
			}
	}
</style>
